<template lang="pug">
    transition(name="fade")
        .detail(v-show="show")
            h1 详情
                span(@click="backSummarize") 返回
            ul(v-for="(item,key,index) in list[index]" :key="index")
                li
                    span {{key}}
                    span {{item}}
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      index: null,
      list: {},
      show: false
    };
  },
  mounted() {},
  methods: {
    backSummarize() {
      this.$store.commit("ShowDetail", false);
    }
  },
  computed: {
    detailIndex() {
      return this.$store.state.detailIndex;
    },
    getList() {
      return this.$store.state.list;
    },
    isShow() {
      return this.$store.state.isShowDetail;
    }
  },
  watch: {
    // 监听 点击第几个
    detailIndex(val) {
      this.index = val;
    },
    //  监听list是否跟新
    getList(val) {
      this.list = val;
    },
    // 判断是否显示
    isShow(val) {
      this.show = val;
    }
  }
};
</script>

<style scoped lang="stylus">
    .fade-enter-active
        transition: 1s

    .fade-leave-active
        transition: 0s

    .fade-enter, .fade-leave-to
        transform: translateX(10px);
        opacity: 0;
    .detail
        padding 20px
        h1
            display: flex
            justify-content space-between
            span
                display: inline-block
                color: white
                background-color cornflowerblue
                font-size 20px
                width: 50px
                height 50px
                line-height 50px
                border-radius 50%
                cursor: pointer
                box-shadow 1px 1px 8px grey
                &:active
                    box-shadow none
        ul
            list-style-type none
            li
                display flex
                justify-content space-around
                padding 20px
                border-bottom black 1px solid
                span
                    width 50%
</style>
